<template>
  <div class="progress-bar-container">
    <div class="progress-bar" :style="{ width: progress + '%' }"></div>
	<div class="progress-bar-title" style="font-size: 12px;">{{progress}}%</div>
  </div>
</template>
 
<script>
export default {
  name: 'ProgressBar',
  props: {
    progress: {
      type: Number,
      required: true
    }
  }
}
</script>
 
<style scoped>
.progress-bar-container {
  width: 100%;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  height: 0.3rem;
}
 
.progress-bar {
  /* height: 30px; */
  background-color: #4caf50;
  transition: width 0.5s ease-in-out;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  color: white;
}
.progress-bar-title{
	font-size: 0.28rem !important;
	margin-right: 0.1rem;
}
</style>